<template>
    <el-container>
        <el-header>
            <div><img src="../../pictures/logo.png" width="68px" height="60px"> <span>科记：记录精彩校园生活</span></div>
            <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#99ecff"
            text-color="black"
            active-text-color="#f59456">
                <el-menu-item class="grid-content" index="1">
                    <el-link href="#/home" target="_self" underline="false">科记主页</el-link>
                </el-menu-item>
                <el-submenu class="grid-content" index="3">
                    <template slot="title">生活助手</template>
                    <el-menu-item index="3-1">
                        <router-link :to="{ name: 'blog', params: { id: 1 } }">校园博客</router-link>
                    </el-menu-item>
                    <el-menu-item index="3-2">
                        <router-link :to="{ name: 'blog', params: { id: 2 } }">生活分享</router-link>
                    </el-menu-item>
                    <el-menu-item index="3-3"><a href="#/question" target="_self">校园问答</a></el-menu-item>
                </el-submenu>
                <el-submenu class="grid-content" index="4">
                    <template slot="title">班级事务</template>
                    <el-menu-item index="4-1">
                        <router-link :to="{ name: 'notice'}">班级通知</router-link>
                    </el-menu-item>
                    <el-menu-item index="4-2"><a href="#/account" target="_self">班级账目</a></el-menu-item>
                </el-submenu>
                <el-menu-item class="grid-content" index="5">
                    <el-link href="#/information" target="_self" underline="false">个人信息</el-link>
                </el-menu-item>
                <el-menu-item class="grid-content">
                    <div display: center>
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-select v-model="select" slot="prepend" placeholder="请选择">
                            <el-option label="校园博客" value="1"></el-option>
                            <el-option label="生活助手" value="2"></el-option>
                            <el-option label="校园问答" value="3"></el-option>
                            <el-option label="班级通知" value="4"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu-item>
                <el-menu-item>
                    <div><el-col :span="12">
                            <div class="demo-basic--circle">
                                <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
                            </div>
                        </el-col> 
                    </div>
                </el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>

        <el-main>
            <body>
            <div id="app">
                <el-carousel class="carousel" height="300px">
                    <el-carousel-item v-for="(blog, index) in blogs" :key="index">
                        <div style="position: relative; text-align: center;">
                            <img :src="blog.imageUrl" alt="Blog Image" style="width: 100%; height: 100%; object-fit: cover;">
                            <div style="position: absolute; bottom: 10px; left: 10px; color: white;">
                                <h4>{{ blog.title }}</h4>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>

                <div class="info">
                    <div class="box">
                        <h3>热门问答</h3>
                        <el-list>
                            <el-list-item v-for="(question, index) in questions" :key="index">
                                <p>{{ question.title }} (回答人数: {{ question.answerNum }})</p>
                            </el-list-item>
                        </el-list>
                    </div>
                    <div class="box">
                        <h3>班级通知</h3>
                        <el-list>
                            <el-list-item v-for="(notice, index) in notices" :key="index">
                                <p>{{ notice.title }} (发布于: {{ notice.writingDate }})</p>
                            </el-list-item>
                        </el-list>
                    </div>
                </div>
            </div>
            </body>
        </el-main>
        <el-footer>
            <el-row>
                <el-button type="primary" icon="el-icon-edit" circle @click="edit()"></el-button>
            </el-row>
        </el-footer>
    </el-container>
</template>

<script>
import { getUsersinfo, getHomeinfo } from '@/api/home'

    export default {
    data() {
      return {
        activeIndex: '1',
        blogs: [],
        questions: [],
        notices: [],
        activeIndex2: '1',//与字体颜色有关的值
        input: '',//搜索栏的输入
        select: '',//搜索栏的选择
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"//头像的访问路径
      };
    },
    methods: {
        fetchHomeInfo() {
            getHomeinfo() // 获取首页信息
               .then(response => {
                    this.blogs = response.data.data.blogs; // 将博客信息赋给 blogs
                    this.questions = response.data.data.questions; // 将问题信息赋给 questions
                    this.notices = response.data.data.notices; // 将通知信息赋给 notifications
                })
        },

        edit(){
            var targetUrl = "#/editcompus";
            // 使用window.location.href进行页面跳转
            window.location.href = targetUrl;
        },

        fetchUserInfo() {
            getUsersinfo() // 获取用户信息
               .then(response => {
                    this.squareUrl = response.data.imageUrl; // 将头像路径赋给 squareUrl
                })
        }
    },
    created() {
        this.fetchHomeInfo();
        this.fetchUserInfo();
    }
  }
</script>

<style>
    .el-header{
        background: #99ecff;
        display: flex;
        padding-left: 0;
        justify-content: space-between;
        color: black;
        font-size: 20px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        .carousel {
            width: 60%;
            margin: 20px auto;
        }
        .info {
            display: flex;
            justify-content: space-between;
            width: 80%;
            margin: 20px auto;
        }
        .box {
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            width: 45%;
        }
</style>